<template>
  <ph-view>
    <ph-blockquote type="primary">该组件为独立组件<br/><a href="https://www.npmjs.com/package/ph-actionsheet" target="_blank">npm 地址</a></ph-blockquote>
    <ph-tab>
        <ph-tab-panel title="案例展示">
            <ph-button-group :container="true">
                <ph-button @click="open('top')" type="primary" >上</ph-button>
                <ph-button @click="open('bottom')" type="success">下</ph-button>
                <ph-button @click="open('left')" type="danger">左</ph-button>
                <ph-button @click="open('right')" type="warning">右</ph-button>
            </ph-button-group>
        </ph-tab-panel>
        <ph-tab-panel title="template"><ph-pretty>{{ template }}</ph-pretty></ph-tab-panel>
        <ph-tab-panel title="基本介绍">
          <ph-pretty>{{ intro }}</ph-pretty>
        </ph-tab-panel>
    </ph-tab>
    <ph-actionsheet class="demo-actionsheet" :visible="state.visible" :position="state.position" @hide="state.visible=false">
        <p>中国我爱你</p>
        <p>中国我爱你</p>
        <p>中国我爱你</p>
        <p>中国我爱你</p>
        <p>中国我爱你</p>
    </ph-actionsheet>
  </ph-view>
</template>
<script lang="ts">
import { defineComponent, reactive } from "vue";
import { PhActionsheet, PhButton, PhTab, PhTabPanel, PhView, PhBlockquote, PhButtonGroup } from "@/index";
import * as Data from "../data/actionsheet";
export default defineComponent({
  components: { PhActionsheet, PhButton, PhTab, PhTabPanel, PhView, PhBlockquote, PhButtonGroup },
  setup() {
    const state = reactive({
        visible:false,
        position:"bottom"
    })
    const open = (position:string)=>{
        state.visible = true
        state.position = position
    }
    return {
      state,
      open,
      ...Data,
    };
  },
});
</script>
<style lang="scss">
.demo-actionsheet{
  .ph-actionsheet{
    box-shadow:0 0 15px rgba( 0 0 0 /40%);
    padding:15px;
  }
}
</style>
